<template>
	<div class="pay_record">
		<header>
			<div>总支付</div>
			<span>{{ state.total_pay_money }}</span>
		</header>
		<div class="tab">支付明细</div>
    <van-tabs
        v-model:active="state.active"
        line-width="20px"
        title-inactive-color="#484848"
        :before-change="tabsBeforeChange"
    >
      <van-tab v-for="item of state.tabs" :title="item.key" :key="item.value"></van-tab>
    </van-tabs>
		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getPaymentRecord"
		>
			<div class="list_item" v-for="item of state.paymentRecordList" :key="item.id">
				<div class="title">
					<div>{{ item.title }}</div>
					<div style="font-weight: 400;font-size: 16px;display: flex;flex-direction: row;justify-content: center;align-items: center;">
            <img v-if="!item.more_7_day && (item.type == 2 || item.type == 3) && !item.is_refund" width="22" src="@/assets/img/video/tuikuan.png" alt="" @click="refundOrder">
            <span> -{{ item.pay_amount }}</span>
          </div>
				</div>
				<div class="time">{{ item.pay_time }}</div>
			</div>
		</van-list>
	</div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { useMainStore } from '@/store/index';
import { paymentRecord,orderRefund } from '@/api/my';
import {Toast,Dialog} from "vant";
import 'vant/es/dialog/style';

const mainStore = useMainStore();
const state = reactive<any>({
  tabs: [
    { key: '其他', value: 0 },
    { key: '栏目认证', value: 1 },
    { key: '红娘开通', value: 2 },
  ],
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id,
    state: 0
	},
  active: 0,
	loading: false,
	finished: false,
	paymentRecordList: [],
	total_pay_money: ''
});

// tab切换
const tabsBeforeChange = (name: number | string): boolean => {
  state.pageInfo.state = state.tabs[name].value;
  state.pageInfo.pageIndex = 1;
  state.paymentRecordList = [];
  getPaymentRecord();
  return true;
};

const getPaymentRecord = async () => {
	const res = await paymentRecord(state.pageInfo);
	let { result, total_pay_money } = res.data[0];
	state.total_pay_money = total_pay_money;
	if (result.dataList.length) {
		state.pageInfo.pageIndex++;
		state.paymentRecordList = [...state.paymentRecordList, ...result.dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};

// 退款
const refundOrder = () => {
  Dialog.confirm({
    title: '',
    message: '是否要发起退款',
  })
      .then(async () => {
        // on confirm
        const res = await orderRefund({
          user_id:mainStore.user_id,
          type:state.active
        });
        if (res.errorCode == 0) {
          return Toast(res.errorInfo)
        }
      })
      .catch(() => {
        // on cancel
      });
};
</script>

<style lang="scss" scoped>
.pay_record {
	background: #f5f5f5;
	header {
		@include flx-direction-between;
		height: 140px;
		box-sizing: border-box;
		padding: 38px 15px 44px 15px;
		color: #ffffff;
		background: linear-gradient(111deg, #f53d7d, #fb56b3);
		div {
			font-size: 14px;
			opacity: 0.8;
		}
		span {
			font-size: 39px;
			font-family: Noto Sans S Chinese;
		}
	}
	.tab {
		height: 55px;
		box-sizing: border-box;
		padding-left: 15px;
		border: 1px solid #eeeeee;
		font-size: 16px;
		font-weight: bold;
		line-height: 55px;
		background: #f5f5f5;
	}
	.list {
		height: calc(100vh - 140px - 55px);
		overflow: scroll;
		background: #f5f5f5;

		.list_item {
			@include flx-direction-between;
			height: 65px;
			box-sizing: border-box;
			padding: 15px;
			background: #ffffff;
			border-bottom: 1px solid #eeeeee;
			.title {
				@include flx-justify-between;
				font-size: 15px;
				font-weight: bold;
			}
			.time {
				font-size: 13px;
				font-weight: 400;
				color: #9ba0aa;
			}
		}
	}
}
</style>
